<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工程材料需求发货</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../resources/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../resources/css/style.css">

    <style>
        body{padding: 20px 25px; background-color: #f5f5f5; font-family: Microsoft YaHei;}
        .layui-input{width:100%;}
        .icons{position: absolute;right: 10px; top: 10px;}
        .titles{height: 30px;background-color: #ededed;line-height: 30px;font-size: 16px;color: #333333;padding-left: 20px;}
        .details{background-color: #FFF; font-size: 12px; color: #333333; padding: 15px 20px; line-height: 24px;}
        /*.details ul,li{list-style: inherit;}*/
        .details ul:after {
            content: "\0020";
            display: block;
            height: 0;
            clear: both;
        }
        .details li{width: 30%;float: left}
        li:before {content: "● "; color: #e3e3e3; font-size: 12px;}
        .detaL{width: 115px;display: inline-block;}
        .layui-table th{font-size: 13px; text-align: center;}
        thead tr th:before {content: ""; color: #e3e3e3; font-size: 12px;}
        .layui-table td{text-align: left; font-size: 12px; color: #333;}
        ._NUMSR{text-align: right!important;padding: 0;}
        @media screen and (max-width: 750px) {
            body{padding: 0;}
            .details ul li {width: 100%;border-bottom: 1px solid #EEE; padding: 5px 0;}
            .titles{margin-top: 50px;}
            .details ul{margin-top: 0;}
            .detaileds{width: 100%;overflow-x: auto;}
            .detaileds table{width: 280%!important;overflow-x: auto;}
            .tijiao{position: absolute;top: -43px;right: 15px; background-color: transparent;
                font-size: 20px;z-index: 999;}

        }
    </style>
</head>
<body>

<div class="_MOVE">
    <form class="layui-form layui-form-pane" action="" >
        <div class="MOVE_title">
            <div class="site-tree-mobile layui-show houtui" onclick="history.back(-1)">
                <i class="layui-icon">&#xe603;</i>
            </div>
            <span class="zhanwei"></span>
            <p class="MOVE_biaoti">工程材料需求发货</p>
            <span class="shousuo"></span>

        </div>

        <div class="engineering"><!--工程信息-->
            <div class="titles">201702</div>
            <div class="details">
                <!--<ul>-->
                    <!--<li><span class='detaL'>项目名称：</span><span class="dataR"> 湖南路</span></li>-->
                    <!--<li><span class='detaL'>供货时间：</span><span class="dataR">2016-10-11 17:13:00</span></li>-->
                    <!--<li><span class='detaL'>采购单位经手人：</span><span class="dataR">王瑟</span></li>-->
                    <!--<li><span class='detaL'>施工单位：</span><span class="dataR">现代</span></li>-->
                    <!--<li><span class='detaL'>施工队签收状态：</span><span class="dataR">签收完成</span></li>-->
                    <!--<li><span class='detaL'>供货单位经手人：</span><span class="dataR">张三</span></li>-->
                    <!--<li><span class='detaL'>供货地址：</span><span class="dataR">郑州市金水区</span></li>-->
                    <!--<li><span class='detaL'>材料员审核：</span><span class="dataR">完成</span></li>-->
                    <!--<li><span class='detaL'>收料单位经手人：</span><span class="dataR">李四</span></li>-->
                <!--</ul>-->
            </div>
            <div class="detailed">      <!--材料明细-->

                <div class="detaileds">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>
                                <input type="checkbox" name="like1[write]" lay-filter="allChoose" lay-skin="primary" title='' >       <!--checked=""   是否被选中-->
                            </th>
                            <th>材料名称</th>
                            <th>材料规格</th>
                            <th>材料单位</th>
                            <th>供货时间</th>
                            <th>申请量</th>
                            <th>发货量</th>
                            <th>施工队签收状态</th>
                            <th>备注</th>
                        </tr>
                        </thead>
                        <tbody>
                            <!--<tr>-->
                            <!--<td>三级钢</td>-->
                            <!--<td>28</td>-->
                            <!--<td>t</td>-->
                            <!--<td>50</td>-->
                            <!--<td>15</td>-->
                            <!--<td>完成</td>-->
                            <!--<td>质量不合格</td>-->
                            <!--<td>质量不合格</td>-->
                            <!--<td>质量不合格</td>-->
                            <!--</tr>-->

                        </tbody>
                    </table>
                </div>



            </div>

        </div>

        <button class="layui-btn layui-btn-sm  tijiao" lay-submit lay-filter="_subm">确定</button>

    </form>

</div>
<script src="../../../resources/layui/layui.js" charset="utf-8"></script>
<script src="../../../resources/js/style.js"></script>
<script src="../../../resources/js/api.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate','table'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,table=layui.table
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date1'      //开始时间
        });
        laydate.render({
            elem: '#date2'  //结束时间
        });

        //监听全选
        form.on('checkbox(allChoose)', function(data){
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //是否被选中，true或者false
            console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');         //找到tbody下的所有多选框
            child.each(function(index, item){                             //循环每个参数item  每个多选框
                item.checked = data.elem.checked;                         //所有多选框  选中或取消选中
//                $(item).trigger('click');
            });
            form.render('checkbox');                                      //局部刷新多选框  保持页面操作一致性
        });

        //监听单个点击多选
        form.on('checkbox(filter)', function(data){
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //是否被选中，true或者false
            console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
            var _this=data.othis;
            var chuandi=new Object();
            chuandi.jia=$(_this).parents('tr').attr('idang');
            chuandi.id=$(_this).parents('tr').attr('id');
            chuandi.mat_id=$(_this).parents('tr').attr('mat_id');
            chuandi.names=_this.parents('th').next().text();
            chuandi.guige=_this.parents('th').next().next().text();
            chuandi.num=_this.parents('th').next().next().next().text();
            console.log(chuandi)
            $('.tijiao').removeClass('layui-btn-disabled');

//            console.log($(data.elem).parent(), 'is i======================== parent =')

            if(data.elem.checked){          //如果多选框被选中  给下半部添加内容
                $('.beixuan table tbody').append('<tr id="'+chuandi.id+'" mat_id="'+chuandi.mat_id+'" idang="'+chuandi.jia+'">\n' +
                    '                                    <th class="names">'+chuandi.names+'</th>\n' +
                    '                                    <th class="guige">'+chuandi.guige+'</th>\n' +
                    '                                    <th class="nums">\n' +
                    '                                        <input type="number" class="inputs" lay-verify="required" value="'+chuandi.num+'"/>\n' +
                    '                                        <input type="hidden" class="numson" lay-verify="required" value="'+chuandi.num+'"/>\n' +
                    '                                    </th>\n' +
                    '                                </tr>')
            }else{                          //否则循环下半部所有的tr删除对应的tr
                $('.beixuan table tbody tr').each(function () {
                    if($(this).attr('id')==chuandi.id){
                        $(this).remove();
                    }

                })

            }



        });

        ajaxs('/api/supply/buildFeedManagerDetail.do','post',{'type':'c','cc_uuid':sessionStorage.UUid,'p':getCookie('yanzheng')},function
            (data) {
            console.log(data)
            var datas=data.data;
            var zhuangtai='';
            for(var i=0;i<datas.length;i++){
                if(i==0){
                    $('.titles').html('材料供应单');
                    ccuid=datas[i].cc_uuid;
                    dizhi=datas[i].f_adr;
                }
                if(datas[i].hasOwnProperty('rm_Num')){
                    zhuangtai='已签收';
                }else{
                    zhuangtai='未签收';
                }

                $('.detaileds tbody').append(' <tr id="'+datas[i].id+'" mat_id="'+datas[i].mat_id+'" price="'+datas[i].mat_Price+'">\n' +
                        '<td class="danxuan"><input type="checkbox" name="like1[write]" lay-filter="filter"    lay-skin="primary" title=\'\' class="checkeds"></td>'+
                    '                                       <td>'+datas[i].mat_Name+'</td>\n' +
                    '                            <td>'+datas[i].mat_Spec+'</td>\n' +
                    '                               <td>'+datas[i].mat_bit+'</td>\n' +
                    '                            <td style="width: 125px;">'+datas[i].supply_Time+'</td>\n' +
                    '                            <td class="_NUMSR numswarp">'+datas[i].feed_Num+'</td>\n' +
                    '                            <td class="_NUMSR nums" style="width: 50px;"><input type="number" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input numson" value="'+datas[i].feed_Num+'"></td>\n' +
                    '                            <td>'+zhuangtai+'</td>\n' +
                    '                            <td><input type="text" name="beizu"  placeholder="请输入" autocomplete="off" class="layui-input" value=""></td>\n' +
                    '                        </tr>')

            }
            form.render();
        })
        var ccuid='';
        var dizhi='';
        form.on('submit(_subm)',function (data) {
            console.log(data.field)
            var cailiao='';

            $('.layui-table tbody tr').each(function () {
                var danxuan=$(this).children('.danxuan').children('.checkeds');
                if(danxuan.is(':checked')){

                cailiao+=$(this).attr('mat_id')+','+$(this).children('.numswarp').text()+','+$(this).children('.nums').children('.numson').val()+','+$(this).attr('price')+','+'0'+','+$(this).attr('id')+'|';
                }

            });
            cailiao=cailiao.substr(0,cailiao.length-1);

            data.field.lRdetail=cailiao;
            data.field.cc_UUID  =ccuid;
            data.field.r_adr=dizhi;
            data.field.rm_Code='001';
            data.field.p=getCookie('yanzheng');
            console.log(data.field)
            $('.tijiao').addClass('layui-btn-disabled');
            tiaoAlertAjax('/api/supply/builFeedManagerVali.do',data.field,'.tijiao');
            //tiaoAlertAjax('/api/buil/builSignHisBao.do',data.field,'.tijiao');


            return false;
        })          //监听提交



    })

</script>
</body>
</html>